<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<title>15种CSS3图片Hover悬停效果代码_懒人图库</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
</head>
<body>
<!-- 代码 开始 -->
<div class="container">
    <div class="grid">
        <figure class="effect-lily">
            <img src="img/1.jpg" alt="img01"/>
            <figcaption>
                <h2>Nice <span>Lily</span></h2>
                <p>Lily likes to play with crayons and pencils</p>
                <a href="http://www.baidu.com/" target="_blank">View more</a>
            </figcaption>			
        </figure>
        <figure class="effect-sadie">
            <img src="img/2.jpg" alt="img02"/>
            <figcaption>
                <h2>Holy <span>Sadie</span></h2>
                <p>Sadie never took her eyes off me. <br>She had a dark soul.</p>
                <a href="http://www.baidu.com/" target="_blank">View more</a>
            </figcaption>			
        </figure>
        <figure class="effect-honey">
            <img src="img/7.jpg" alt="img07"/>
            <figcaption>
                <h2>Dreamy <span>Honey</span> <i>Now</i></h2>
                <a href="http://www.baidu.com/" target="_blank">View more</a>
            </figcaption>			
        </figure>
        <figure class="effect-layla">
            <img src="img/4.jpg" alt="img04"/>
            <figcaption>
                <h2>Crazy <span>Layla</span></h2>
                <p>When Layla appears, she brings an eternal summer along.</p>
                <a href="http://www.baidu.com/" target="_blank">View more</a>
            </figcaption>			
        </figure>
        <figure class="effect-zoe">
            <img src="img/14.jpg" alt="img14"/>
            <figcaption>
                <h2>Creative <span>Zoe</span></h2>
                <span class="icon-heart"></span>
                <span class="icon-eye"></span>
                <span class="icon-paper-clip"></span>
                <p>Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
                <a href="http://www.baidu.com/" target="_blank">View more</a>
            </figcaption>			
        </figure>
        <figure class="effect-oscar">
            <img src="img/8.jpg" alt="img08"/>
            <figcaption>
                <h2>Warm <span>Oscar</span></h2>
                <p>Oscar is a decent man. He used to clean porches with pleasure.</p>
                <a href="http://www.baidu.com/" target="_blank">View more</a>
            </figcaption>			
        </figure>
        <figure class="effect-marley">
            <img src="img/9.jpg" alt="img09"/>
            <figcaption>
                <h2>Sweet <span>Marley</span></h2>
                <p>Marley tried to convince her but she was not interested.</p>
                <a href="http://www.baidu.com/" target="_blank">View more</a>
            </figcaption>			
        </figure>
        <figure class="effect-ruby">
            <img src="img/10.jpg" alt="img10"/>
            <figcaption>
                <h2>Glowing <span>Ruby</span></h2>
                <p>Ruby did not need any help. Everybody knew that.</p>
                <a href="http://www.baidu.com/" target="_blank">View more</a>
            </figcaption>			
        </figure>
        <figure class="effect-roxy">
            <img src="img/3.jpg" alt="img03"/>
            <figcaption>
                <h2>Charming <span>Roxy</span></h2>
                <p>Roxy was my best friend. She'd cross any border for me.</p>
                <a href="http://www.baidu.com/" target="_blank">View more</a>
            </figcaption>			
        </figure>
        <figure class="effect-bubba">
            <img src="img/6.jpg" alt="img06"/>
            <figcaption>
                <h2>Fresh <span>Bubba</span></h2>
                <p>Bubba likes to appear out of thin air.</p>
                <a href="http://www.baidu.com/" target="_blank">View more</a>
            </figcaption>			
        </figure>
        <figure class="effect-romeo">
            <img src="img/5.jpg" alt="img05"/>
            <figcaption>
                <h2>Wild <span>Romeo</span></h2>
                <p>Romeo never knows what he wants. He seemed to be very cross about something.</p>
                <a href="http://www.baidu.com/" target="_blank">View more</a>
            </figcaption>			
        </figure>
        <figure class="effect-dexter">
            <img src="img/12.jpg" alt="img12"/>
            <figcaption>
                <h2>Strange <span>Dexter</span></h2>
                <p>Dexter had his own strange way. You could watch him training ants.</p>
                <a href="http://www.baidu.com/" target="_blank">View more</a>
            </figcaption>			
        </figure>
        <figure class="effect-sarah">
            <img src="img/13.jpg" alt="img13"/>
            <figcaption>
                <h2>Free <span>Sarah</span></h2>
                <p>Sarah likes to watch clouds. She's quite depressed.</p>
                <a href="http://www.baidu.com/" target="_blank">View more</a>
            </figcaption>			
        </figure>
        <figure class="effect-chico">
            <img src="img/15.jpg" alt="img15"/>
            <figcaption>
                <h2>Silly <span>Chico</span></h2>
                <p>Chico's main fear was missing the morning bus.</p>
                <a href="http://www.baidu.com/" target="_blank">View more</a>
            </figcaption>			
        </figure>
        <figure class="effect-milo">
            <img src="img/11.jpg" alt="img11"/>
            <figcaption>
                <h2>Faithful <span>Milo</span></h2>
                <p>Milo went to the woods. He took a fun ride and never came back.</p>
                <a href="http://www.baidu.com/" target="_blank">View more</a>
            </figcaption>			
        </figure>
    </div>
</div>
<!-- 代码 结束 -->

</body>
</html>